<template>
  <div class="tabs">
    <!--命名路由-->
    <ul>
      <router-link to="/index" tag="li">
        <div @click="selectHtmlNum(0)">
          <div :class="selectHtml===0?'blue-class':''">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconindex"></use>
            </svg>
          </div>
          <div :class="selectHtml===0?'blue-class':''">首页</div>
        </div>
      </router-link>

<!--      <router-link to="/" tag="li">
        <div @click="selectHtmlNum(1)">
          <div :class="selectHtml===1?'blue-class':''">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconweixin"></use>
            </svg>
            &lt;!&ndash;
            <i class="icon iconfont icon-wo"></i>
  &ndash;&gt;
          </div>
          <div :class="selectHtml===1?'blue-class':''">微信客服</div>
        </div>
      </router-link>-->
      <router-link to="/myindex" tag="li">
        <div @click="selectHtmlNum(2)">
          <div :class="selectHtml===2?'blue-class':''">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconwode"></use>
            </svg>
            <!--
            <i class="icon iconfont icon-wo"></i>
  -->
          </div>
          <div :class="selectHtml===2?'blue-class':''">我的</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "tabs",
    data() {
      return {
        selectHtml: 0
      }
    },

    methods: {
      selectHtmlNum(index) {
        this.selectHtml = index;
        console.log(index)
      }
    },

  }
</script>
<style lang="less" type="text/less">


  .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 4px #000;
    width: 100%;
    height: 1.2rem;
    & > ul, & > ul > li {
      margin: 0;
      padding: 0;
    }
    ul {
      display: table;
      width: 100%;
      & > li {
        text-align: center;
        font-size: 0.8rem;
        display: table-cell;
        padding: 0.1rem 1rem;
        cursor: pointer;
        &.router-link-active {
        }
        & > div {
          font-size: 0.5rem;
          & > i {
            font-size: 30px;
          }
        }
      }
    }
  }
</style>
